<template>
    <div class="top-menu">
        <div class="t-m-content">
            <div class="t-m-left"> 
                <div class="l-left f-l-r" v-if="leftMsg" @click="back"><el-icon class="back-icon"><ArrowLeftBold /></el-icon>{{ leftMsg }}</div>
                <slot name="left"></slot>
            </div>
            <div class="t-m-center">
                <div class="c-center inline-block ellipsis" v-if="centerMsg">{{ centerMsg }}</div>
                <slot name="center"></slot>
            </div>
            <div class="t-m-right">
                <div class="r-right inline-block" v-if="rightMsg">{{ rightMsg }}</div>
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { emit } from 'process'
import { onMounted, ref, toRefs, watch } from 'vue'

const props = defineProps({
    data: {
        type: Object,
        default: function() {
            return {
                leftMsg: '',
                centerMsg: '',
                rightMsg: '',
                backRoutrName: ''
            }
        }
    }
})

const { data } = toRefs(props)

const leftMsg = ref<string>('')
const centerMsg = ref<string>('')
const rightMsg = ref<string>('')
const backRoutrName = ref<string>('') 
const initData = () => {
    leftMsg.value = data.value.leftMsg ? data.value.leftMsg : ''
    centerMsg.value = data.value.centerMsg ? data.value.centerMsg : ''
    rightMsg.value = data.value.rightMsg ? data.value.rightMsg : ''
    backRoutrName.value = data.value.backRoutrName ? data.value.backRoutrName : ''
}

watch(() => data.value, () => {
    initData()
}, { deep: true })

onMounted(() => {
    initData()
})

let emits = defineEmits(['back'])
// 点击返回
const back = () => {
    router.back()
}
</script>

<style lang="less" scoped>
.top-menu {
    width: 100%;
    height: var(--navigation-bar-height);
    z-index: 2013;
    .t-m-content {
        line-height: var(--navigation-bar-height);
        border-bottom: 1px solid var(--border-color-gray);
        background-color: var(--bg-color);
        box-sizing: border-box;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        display: grid;
        grid: var(--navigation-bar-height) / 25% 50% 25%;
        width: 100%;
        height: var(--navigation-bar-height);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2013;
    }
    .t-m-left {
        text-align: left;
        .l-left {
            color: var(--font-color-blue);
        }
    }
    .t-m-center {
        text-align: center;
        .c-center {
            font-size: var(--menu-font-size);
            color: var(--font-color-black);
            font-weight: 500;
            white-space: nowrap;
        }
    }
    .t-m-right {
        text-align: right;
        .r-right {
            color: var(--font-color-black);
        }
    }
}
</style>